<template>
	<div id="regist">
		<form>
			<div>
				<input type="text" name="username" placeholder="用户名" v-model="name" @focus="focus=1" @blur="focus=0"><br/><em v-show="focus==1||nametips==false">*大于3位的数字</em>
			</div>
			<div>
				<input type="text" name="tel" placeholder="手机号" v-model="tel" @focus="focus=2" @blur="focus=0"><br/><em v-show="focus==2||teltips==false">*大于3位的数字</em>
			</div>
			<div>
				<input type="psw" name="psw" placeholder="密码" v-model="psw" @focus="focus=3" @blur="focus=0"><br/><em v-show="focus==3||pswtips==false">*大于3位的数字</em>
			</div>
			<button class="button" @click.prevent="registJudge()">注册
				<i v-show="icon" class="process"></i>
				<i v-show="ok" class="ok"></i>
			</button>
		</form>
	</div>
</template>

<script>
export default {
	name: "Regist",
	data:function() {
		return {
			name: "",
			tel: "",
			psw: "",
			focus:0,
			nametips:true,
			teltips:true,
			pswtips:true,
			index: "",
			icon:false,
			fail:false,
			ok:false,
		}
	},
	methods:{
		register:function(user){
			this.$store.dispatch('register',user);
		},
		registJudge:function() {
			if(this.ok){this.ok = false};
			this.nametips = (/^\d{3,}$/.test(this.name)) ? true : false;
			this.teltips = (/^\d{3,}$/.test(this.tel)) ? true : false;
			this.pswtips = (/^\d{3,}$/.test(this.psw)) ? true : false;
			if(this.nametips&&this.teltips&&this.pswtips){
				this.icon = true;
				setTimeout(()=>{
					this.icon = false;
					this.ok = true;

					this.register({
						name: this.name,
						tel: this.tel,
						psw: this.psw
					});
				},1500)
			}else {
				this.fail = true;
			}
		}
		// saveData: function() {
		// 	var obj = {
		// 		name:this.name,
		// 		tel:this.tel,
		// 		psw:this.psw
		// 	};			
		// 	var regist_info = JSON.stringify(obj);
		// 	window.localStorage.setItem("user",regist_info);
		// },
	},
}
</script>

<style>
#regist {text-align: center;}
#regist input {
	width: 220px;
	height: 30px;
	margin: 3px;
	padding: 0px 5px;
	box-sizing: border-box;
}
#regist .button {
	display: inline-block;
	width: 220px;
	height: 30px;
	line-height: 30px;
	margin-top: 10px;
	background: #3385ff;
	border: none;
	outline: none;
	font-size: 16px;
	color: #333;
}
#regist .process {
	padding-left: 20px;		
	background: url("../../static/img/process.png");
	background-size: 100%;
}
#regist .ok {
	padding-left: 20px;
	background: url("../../static/img/check2.png");
	background-size: 100%;
}
#regist em {
	color: #E10601;
	font-size: 12px;
}
</style>